<template>
	<div class="city-list-container">
	
		<div class="city-title">
			当前定位城市 {{ cur }}
		</div>  
		<div class="city-title">
			{{hotcity.title}}
		</div> 
		<div class="city-item-s flex warp" >
			<div class="city-item" v-for="(item,index) in hotcity.lists" :key="`city${index}`"  @click="chooseCity(item)">
				{{item}}
			</div>
		</div>
		
		 
		<!-- 排序列表 -->
		<van-index-bar>
		  <div v-for="(item, index) in list" :key="index">
		  	 <van-index-anchor :index="item.title" /> 
			 <van-cell  v-for="(item1, index) in item.lists"  :key="index" @click="chooseCity(item1)" :title="item1"> 
			 </van-cell> 
		  </div> 
		</van-index-bar> 
	</div>
	
</template>

<script>
	import indexList from "./city.js";
	import {mapState,mapMutations} from 'vuex'; 
	const letterArr = indexList.city.map(val => {
		return val.title;
	})
	export default {
		data() {
			return {
				hotcity:indexList.hotcity,
				scrollTop: 0,
				indexList: letterArr,
				list: indexList.city,
				cur:this.city,
			}
		},
		
	
		computed:{...mapState(['city'])},
		 
		methods: { 
			 chooseCity(city){
				  console.log("cname: ",city);
				  this.$store.state.city = city
				  this.$router.back(-1)
			 }
		},
		  
	}
</script>

<style scoped>
 
 .city-item{ margin:5px}
 .van-index-bar{ height:70vh;overflow: scroll;} 	 
	 
</style>